<?php
use lvzmen\yii\cms\widgets\markdown\Markdown;
use lvzmen\yii\cms\widgets\markdown\Example;
use yii\bootstrap\ToggleButtonGroup;
use yii\bootstrap\Tabs;

$html = [
    "markdown0" => <<<M0
## 标签页（Tabs）
标签页的使用如下：
M0,
    "example0" => [
        "html" =>
            ToggleButtonGroup::widget([
                'type' => 'checkbox',
                'name' => 'city',
                'items' => [
                    "1" => "hangzhou",
                    "2" => "lishui",
                ],
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Tabs;
echo Tabs::widget([
    'items' => [
        [
            'label' => 'One',
            'content' => 'The content of one;',
            'active' => true
        ],
        [
            'label' => 'Two',
            'content' => 'The content of two;',
        ],
        [
            'label' => 'Baidu Link',
            'url' => 'http://www.baidu.com',
        ],
        [
            'label' => 'Dropdown',
            'items' => [
                [
                    'label' => 'DropdownA',
                    'content' => 'DropdownA',
                ],
                [
                    'label' => 'DropdownB',
                    'content' => 'DropdownB',
                ]
            ],
        ],
    ],
]);
EY0,
        "bootstrap" => <<<EB0
<ul id="w0" class="nav nav-tabs">
    <li class="active">
        <a href="#w0-tab0" data-toggle="tab" aria-expanded="true">
            One
        </a>
    </li>
    <li class="">
        <a href="#w0-tab1" data-toggle="tab" aria-expanded="false">
            Two
        </a>
    </li>
    <li>
        <a href="http://www.baidu.com">
            Baidu Link
        </a>
    </li>
    <li class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown">
        Dropdown <b class="caret"></b>
        </a>
        <ul id="w1" class="dropdown-menu">
            <li>
                <a href="#w0-dd3-tab0" data-toggle="tab" tabindex="-1">
                    DropdownA
                </a>
            </li>
            <li>
                <a href="#w0-dd3-tab1" data-toggle="tab" tabindex="-1">
                    DropdownB
                </a>
            </li>
        </ul>
    </li>
</ul>
EB0
    ],
    "markdown5" => <<<M0
## 100%宽度标签页
通过 `.nav-justified` 类可以很容易实现让导航条占据100%的宽度，示例如下：  
M0,
    "example1" => [
        "html" =>
            Tabs::widget([
                'navType' => 'nav-tabs nav-justified',
                'items' => [
                    [
                        'label' => 'One',
                        'content' => 'The content of one;',
                        'active' => true
                    ],
                    [
                        'label' => 'Two',
                        'content' => 'The content of two;',
                    ],
                    [
                        'label' => 'Three',
                        'content' => 'The content of three;',
                    ],
                    [
                        'label' => 'Four',
                        'content' => 'The content of Four;',
                    ],
                ],
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Tabs;
echo Tabs::widget([
    'navType' => 'nav-tabs nav-justified',
    'items' => [
        [
            'label' => 'One',
            'content' => 'The content of one;',
            'active' => true
        ],
        [
            'label' => 'Two',
            'content' => 'The content of two;',
        ],
        [
            'label' => 'Three',
            'content' => 'The content of three;',
        ],
        [
            'label' => 'Four',
            'content' => 'The content of Four;',
        ],
    ],
]);
EY0,
        "bootstrap" => <<<EB0
<ul id="w2" class="nav nav-tabs nav-justified">
    <li class="active">
        <a href="#w2-tab0" data-toggle="tab" aria-expanded="true">
            One
        </a>
    </li>
    <li class="">
        <a href="#w2-tab1" data-toggle="tab" aria-expanded="false">
            Two
        </a>
    </li>
    <li class="">
        <a href="#w2-tab2" data-toggle="tab" aria-expanded="false">
            Three
        </a>
    </li>
    <li class="">
        <a href="#w2-tab3" data-toggle="tab" aria-expanded="false">
            Four
        </a>
    </li>
</ul>
EB0
    ],

    "markdown6" => <<<M0
## 胶囊式标签页
使用`.nav-pills`类可以实现胶囊样式的标签页，示例如下：
M0,
    "example2" => [
        "html" =>
            Tabs::widget([
                'navType' => 'nav-justified nav-pills',
                'items' => [
                    [
                        'label' => 'One',
                        'content' => 'The content of one;',
                        'active' => true
                    ],
                    [
                        'label' => 'Two',
                        'content' => 'The content of two;',
                    ],
                    [
                        'label' => 'Three',
                        'content' => 'The content of three;',
                    ],
                    [
                        'label' => 'Four',
                        'content' => 'The content of Four;',
                    ],
                ],
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Tabs;
echo Tabs::widget([
    'navType' => 'nav-pills nav-justified',
    'items' => [
        [
            'label' => 'One',
            'content' => 'The content of one;',
            'active' => true
        ],
        [
            'label' => 'Two',
            'content' => 'The content of two;',
        ],
        [
            'label' => 'Three',
            'content' => 'The content of three;',
        ],
        [
            'label' => 'Four',
            'content' => 'The content of Four;',
        ],
    ],
]);
EY0,
        "bootstrap" => <<<EB0
<ul id="w2" class="nav nav-pills nav-justified">
    <li class="active">
        <a href="#w2-tab0" data-toggle="tab" aria-expanded="true">
            One
        </a>
    </li>
    <li class="">
        <a href="#w2-tab1" data-toggle="tab" aria-expanded="false">
            Two
        </a>
    </li>
    <li class="">
        <a href="#w2-tab2" data-toggle="tab" aria-expanded="false">
            Three
        </a>
    </li>
    <li class="">
        <a href="#w2-tab3" data-toggle="tab" aria-expanded="false">
            Four
        </a>
    </li>
</ul>
EB0
    ],

    "markdown1" => <<<M0
## 垂直标签页
标签页本非一定是水平的，可以通过`.nav-stacked`类实现垂直布局，如下：
M0,
    "example3" => [
        "html" =>
            Tabs::widget([
                //'headerOptions' => ["style" => 'margin-left:10px'],
                'navType' => 'nav-pills nav-stacked',
                'items' => [
                    [
                        'label' => 'One',
                        'content' => 'The content of one;',
                        'active' => true
                    ],
                    [
                        'label' => 'Two',
                        'content' => 'The content of two;',
                    ],
                    [
                        'label' => 'Three',
                        'content' => 'The content of three;',
                    ],
                    [
                        'label' => 'Four',
                        'content' => 'The content of Four;',
                    ],
                ],
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Tabs;
echo Tabs::widget([
    'navType' => 'nav-pills nav-stacked',
    'items' => [
        [
            'label' => 'One',
            'content' => 'The content of one;',
            'active' => true
        ],
        [
            'label' => 'Two',
            'content' => 'The content of two;',
        ],
        [
            'label' => 'Three',
            'content' => 'The content of three;',
        ],
        [
            'label' => 'Four',
            'content' => 'The content of Four;',
        ],
    ],
]);
EY0,
        "bootstrap" => <<<EB0
<ul id="w2" class="nav nav-pills nav-stacked">
    <li class="active">
        <a href="#w2-tab0" data-toggle="tab" aria-expanded="true">
            One
        </a>
    </li>
    <li class="">
        <a href="#w2-tab1" data-toggle="tab" aria-expanded="false">
            Two
        </a>
    </li>
    <li class="">
        <a href="#w2-tab2" data-toggle="tab" aria-expanded="false">
            Three
        </a>
    </li>
    <li class="">
        <a href="#w2-tab3" data-toggle="tab" aria-expanded="false">
            Four
        </a>
    </li>
</ul>
EB0
    ],

    "markdown3" => <<<M3
## Widget Api
### 父类及继承关系
![button group](/upload/articles/images/20210924131117.png)
### 属性
- `items`: array    
标签页列表，由二维数组组成，子数组可以包含如下的key：  
    ```
    - label: string, required, the tab header label.
    - encode: bool, optional, whether this label should be HTML-encoded. This param will override global `\$this->encodeLabels` param.
    - headerOptions: array, optional, the HTML attributes of the tab header.
    - linkOptions: array, optional, the HTML attributes of the tab header link tags.
    - content: string, optional, the content (HTML) of the tab pane.
    - url: string, optional, an external URL. When this is specified, clicking on this tab will bring the browser to this URL. This option is available since version 2.0.4.
    - options: array, optional, the HTML attributes of the tab pane container.
    - active: bool, optional, whether this item tab header and pane should be active. If no item is marked as 'active' explicitly - the first one will be activated.
    - visible: bool, optional, whether the item tab header and pane should be visible or not. Defaults to true.
    - items: array, optional, can be used instead of `content` to specify a dropdown items configuration array. Each item can hold three extra keys, besides the above ones:
        * active: bool, optional, whether the item tab header and pane should be visible or not.
        * content: string, required if `items` is not set. The content (HTML) of the tab pane.
        * contentOptions: optional, array, the HTML attributes of the tab content container.
    ```  
- `itemOptions`: array  
最外层`ul`标签的属性；  
- `headerOptions`: array  
`li`标签的属性列表，如：
    ```php
    echo Tabs::widget([
        'headerOptions' => ["style" => 'margin-left:10px'],
        'navType' => 'nav-pills nav-stacked',
        'items' => [
            ... ...
        ],
    ]);
    ```  
    ```html
    //结果如下：
    <ul id="w4" class="nav nav-pills nav-stacked">
        <li class="active" style="margin-left:10px">...</li>
        <li style="margin-left:10px">...</li>
        <li style="margin-left:10px">...</li>
        <li style="margin-left:10px">...</li>
    </ul>
    ```  
- `linkOptions`: array  
`a`标签的属性列表，会应用到每个`a`标签；  
- `encodeLabels`: bool     
是否编码`label`属性值中的`html`元素；  
- `navType`: string     
标签页的类型，默认是`nav-tabs`；
M3
];

foreach($html as $name => $item){
    switch ($name) {
        case strpos($name, "example") !== false:
            echo Example::widget($item);
            break;
        case strpos($name, "markdown") !== false:
            echo Markdown::widget(["content" => $item]);
            break;
        default:
            break;
    }
}